<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统一身份认证</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <el-container style="text-align: center; margin-top: 100px;">
        <el-header>
            <h1>统一身份认证</h1>
        </el-header>
        <el-main>
            <el-form :model="user" label-width="100px" style="width: 350px; margin: 0 auto;">
                <el-form-item label="手机号">
                    <el-input v-model="phoneNum" placeholder="请输入11位手机号" @input="validatePhone"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="password" placeholder="请输入密码"></el-input>
                    <div v-if="!phoneValid" style="color: red; margin-top: 10px;">手机号格式不正确</div>
                    <div v-if="errorMessage" style="color: red; margin-top: 10px;">{{ errorMessage }}</div>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="handleLogin" :disabled="!phoneValid" style="width: 100%;">登录
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <a href="register.html">注册</a>
                    <span style="margin-left: 20px;">
                        <a href="forget_password.html">忘记密码</a>
                    </span>
                </el-form-item>
                <el-form-item>
                    <a href="index.html">返回主页面</a>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                phoneNum: '',
                password: '',
                errorMessage: '',
                phoneValid: true
            };
        },
        methods: {
            validatePhone() {
                const phoneRegex = /^\d{11}$/;
                this.phoneValid = phoneRegex.test(this.phoneNum);
            },

            handleLogin() {
                if (!this.phoneValid) {
                    return;
                }
                var _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/user/login',
                    {
                        phoneNum: _this.phoneNum,
                        password: _this.password
                    }
                )
                    .then(response => {
                        if (response.data.code === 200) {
                            if (response.data.data.userType === 'client') {
                                window.location.href = 'client.html';
                            } else if (response.data.data.userType === 'merchant') {
                                window.location.href = 'merchant.html';
                            }
                        } else {
                            _this.$message.error(response.data.msg);
                        }
                    })
                    .catch(error => {
                        console.error('登录失败', error);
                        _this.errorMessage = '登录失败，请重试';
                    });
            }
        }
    });
</script>
</body>
</html>

